import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import { Form } from 'antd'
import ContentBox from 'components/contentBox'
import CustomTable from 'components/common/table'
import { PAGE_SIZE } from 'constants'
import PropTypes from 'prop-types'

import Style from './details.css'

class IntegralDetails extends Component {
  static propTypes = {
    getIntegralDetails: PropTypes.func,
    match: PropTypes.any,
    integralDetailsData: PropTypes.any,
    integralDetail: PropTypes.any
  }
  constructor (props) {
    super(props)
    this.state = {
      pageNo: 1,
      pageSize: 20
    }
    this.onPageChange = this.onPageChange.bind(this)
    this.onShowSizeChange = this.onShowSizeChange.bind(this)
  }

  getTableCols () {
    return [
      // {
      //   title: '用户Id',
      //   dataIndex: 'goodsTitle',
      //   key: 'goodsTitle',
      //   width: 100
      // },
      // {
      //   title: '用户手机号',
      //   dataIndex: 'mobile',
      //   key: 'mobile',
      //   width: 100
      // },
      {
        title: '积分来源',
        dataIndex: 'integrationClassification',
        key: 'integrationClassification',
        width: 100
      },
      {
        title: '积分变化',
        dataIndex: 'integrationAccount',
        key: 'integrationAccount',
        width: 100
      },
      {
        title: '时间',
        dataIndex: 'time',
        key: 'time',
        width: 100,
        sort: (a, b) => a.time - b.time
      },
      {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark',
        width: 100
      }
    ]
  }

  getUsersTableCols () {
    return [
      {
        title: '用户Id',
        dataIndex: 'userId',
        key: 'userId',
        width: 100
      },
      {
        title: '用户手机号',
        dataIndex: 'mobile',
        key: 'mobile',
        width: 100
      },
      {
        title: '用户名称',
        dataIndex: 'userName',
        key: 'userName',
        width: 100
      },
      {
        title: '用户类型',
        dataIndex: 'memberLevelName',
        key: 'memberLevelName',
        width: 100
      },
      {
        title: '可用积分',
        dataIndex: 'residueIntegration',
        key: 'residueIntegration',
        width: 100
      }, {
        title: '历史积分',
        dataIndex: 'totalIntegration',
        key: 'totalIntegration',
        width: 100
      }
    ]
  }

  componentDidMount () {
    this.init()
  }

  init = (values = {}) => {
    const { match: { params } } = this.props
    const { pageSize, pageNo } = this.state
    this.props.getIntegralDetails({
      pageSize,
      pageNo,
      ...params,
      ...values
    })
  }

  onPageChange (pageNo, pageSize) {
    const params = {}
    params.pageNo = pageNo
    params.pageSize = pageSize
    params.userId = this.id
    this.setState({
      pageNo
    })
    this.props.getIntegralDetails(params)
  }

  onShowSizeChange (current, pageSize) {
    this.setState({
      pageSize
    })
    const params = {}
    params.pageNo = current
    params.pageSize = pageSize
    params.userId = this.id
    this.props.getIntegralDetails(params)
  }

  render () {
    const { integralDetail, integralDetailsData } = this.props
    const { pageNo } = this.state
    const pagination = {
      showSizeChanger: true,
      current: pageNo,
      total: integralDetailsData && integralDetailsData.total,
      onChange: this.onPageChange,
      pageSize: PAGE_SIZE
    }
    return (
      <>
        <ContentBox>
          <div className={Style['users-manage-integral-details']}>
            <div className={Style['users-info-container']}>
              <CustomTable loading={false} columns={this.getUsersTableCols()} dataSource={[{
                userId: integralDetail && integralDetail.userId,
                mobile: integralDetail && integralDetail.mobile,
                userName: integralDetail && integralDetail.userName,
                memberLevelName: integralDetail && integralDetail.memberLevelName,
                residueIntegration: integralDetail && integralDetail.residueIntegration,
                totalIntegration: integralDetail && integralDetail.totalIntegration
                // memberLevelName: integralDetailsData && integralDetailsData.memberLevelName,
              }]} pagination={false} bordered />
            </div>
            <div className={Style['title']}>数据列表</div>
            <CustomTable loading={!integralDetailsData} columns={this.getTableCols()} dataSource={(integralDetailsData && integralDetailsData.integrationDetailedNodes) || []} pagination={pagination} />
          </div>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  integralDetailsData: state.users.integralDetailsData,
  integralDetail: state.users.integralDetail
})
const mapDispatch = dispatch => ({
  getIntegralDetails: dispatch.users.getIntegralDetails,
  getUserDetails: dispatch.users.getUserDetails
})
const FormIntegralDetails = Form.create()(IntegralDetails)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(FormIntegralDetails)
)
